<template>
  <scroll-view class="content">
    <view class="data-pane">
      <view class="l-pane">
        <view class="bigNum" :style="{'font-size': stockInfo.newPrice<1000?'80rpx':'50rpx'}">{{
          Number(stockInfo.newPrice).toFixed(2)
        }}</view>
        <text style="margin-right: 20rpx">{{
          (stockInfo.priceGap >= 0 ? "+" : "") + Number(stockInfo.priceGap).toFixed(2)
        }}</text>
        <text
          >{{
            (stockInfo.fluctuate >= 0 ? "+" : "") + stockInfo.fluctuate
          }}%</text
        >
      </view>
<!--      111-->
<!--      222-->
<!--      333-->
        <!--      第三次提交-->
        <!--      第四次提交-->
        <!--      第五次提交-->

        <view class="r-pane">
        <view class="r-item">
          <text style="margin-right: 20rpx">高 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            numFormat(stockInfo.highPrice) || "--"
          }}</text>
        </view>
        <view class="r-item">
          <text style="margin-right: 20rpx">开 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            Number(stockInfo.todayOpen).toFixed(2) || "--"
          }}</text>
        </view>
        <view class="r-item">
          <text style="margin-right: 20rpx">量 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            numFormat1(stockInfo.dealCount/100) || "--"
          }}</text>
        </view>
        <view class="r-item">
          <text style="margin-right: 20rpx">低 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            Number(stockInfo.lowPrice).toFixed(2) || "--"
          }}</text>
        </view>
        <view class="r-item">
          <text style="margin-right: 20rpx">换 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            stockInfo.change || "7.56%"
          }}</text>
        </view>
        <view class="r-item">
          <text style="margin-right: 20rpx">额 </text>
          <text style="font-size: 24rpx; color: #ff7979">{{
            numFormat(stockInfo.dealSum) || "--"
          }}</text>
        </view>
      </view>
    </view>

    <!-- k线图 -->
    <view class="chart-container">
      <u-tabs :list="tabList" :current="current" lineColor="#f16017" :activeStyle="styles" @click="handleTab"></u-tabs>
      <view class="flex-box">
        <view class="pane-box" style="flex:1">
          <view class="price-info">
            <text>最高: {{Number(stockInfo.highPrice).toFixed(2)}}</text>
            <text>最低: {{Number(stockInfo.lowPrice).toFixed(2)}}</text>
          </view>
          <view class="charts-box">
            <img v-if="current===0" :src="`https://image.sinajs.cn/newchart/min/n/${code[0]||'sh000001'}.gif`" alt="">
            <img v-else-if="current===1" :src="`https://image.sinajs.cn/newchart/daily/n/${code[0]||'sh000001'}.gif`" alt="">
            <img v-else-if="current===2" :src="`https://image.sinajs.cn/newchart/weekly/n/${code[0]||'sh000001'}.gif`" alt="">
            <img v-else-if="current===3" :src="`https://image.sinajs.cn/newchart/monthly/n/${code[0]||'sh000001'}.gif`" alt="">
          </view>
        </view>
        <!-- 买卖盘 -->
        <view class="trade-panel" style="height:560rpx">
          <view class="panel-header">
            <text>档位</text>
            <text>价格</text>
            <text>数量</text>
          </view>
          <view class="sell-panel">
            <view class="panel-item" v-for="i in 5" :key="'sell'+i">
              <text class="direction">卖{{5-i}}</text>
              <text class="price" :style="{color: stockInfo['sell'+(5-i)+'_p'] > stockInfo.todayOpen ? '#cb473a' : '#4eac48'}">{{stockInfo['sell'+(5-i)+'_p'] ? Number(stockInfo['sell'+(5-i)+'_p']).toFixed(1) : '--'}}</text>
              <text class="amount">{{numFormat1(stockInfo['sell'+(5-i)+'_v']/100) || '--'}}</text>
            </view>
          </view>
          <view class="buy-panel">
            <view class="panel-item" v-for="i in 5" :key="'buy'+i">
              <text class="direction">买{{i+1}}</text>
              <text class="price" :style="{color: stockInfo['buy'+(i+1)+'_p'] > stockInfo.todayOpen ? '#cb473a' : '#4eac48'}">{{stockInfo['buy'+(i+1)+'_p'] ? Number(stockInfo['buy'+(i+1)+'_p']).toFixed(1) : '--'}}</text>
              <text class="amount">{{numFormat1(stockInfo['buy'+(i+1)+'_v']/100) || '--'}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>


    <!-- 新闻 -->
    <view class="news-container">
      <view class="n-title">新闻</view>
      <view class="news">
        <view
          class="new"
          v-for="(n, index) in news"
          :key="index"
          @click="handleDetail(n)"
        >
          <view class="n-txt">{{ n.wtitle }}</view>
          <view class="n-info">
            <view class="agent">{{ n.telegraph_type }}</view>
            <view class="date">{{ dateFormat(n.ctimestamp) }}</view>
          </view>
        </view>
      </view>
    </view>

    <view class="ops">
      <view class="op"><button>交易</button></view>
      <view class="op" @click="handleToggleOptional">
        <view><u-icon name="plus-circle"></u-icon></view>
        <view>自选</view>
      </view>
      <button class="op share-btn" open-type="share">
        <view><u-icon name="share-square"></u-icon></view>
        <view>分享</view>
      </button>
    </view>
  </scroll-view>
</template>

<script>
import demodata from "@/mockdata/demodata.json";
import { formatNumber,formatNumber1 } from "../../utils/numberFormatter";
import { getStockList } from "../../api/stock";
import { dateSimpleFormater } from "../../utils/dateFormat";
import { getNewsList } from "../../api/new";
import { mapState, mapMutations } from 'vuex';

export default {
    onShareAppMessage() {
      return {
        title: `${this.name} (${this.code})`,
        // imageUrl: `/static/logo.png`,
        path: `/pages/detail/detail?code=${this.code}&name=${this.name}`
      }
    },
    data() {
    return {
      current:0,
      chartsDataCandle1: {},
      code: [],
      name: "",
      stockInfo: {},
      news: [],
      tabList: [
        {name:'分时图'}, 
        {name:'日K图'}, 
        {name:'周K图'}, 
        {name:'月K图'},
      ],
      styles:{
        transform:'scale(1.25)',
        transition:'all 0.5s'
      },
    };
  },
  computed: {
    numFormat() {
      return (num) => formatNumber(num * 1);
    },
    numFormat1() {
      return (num) => formatNumber1(num * 1);
    },
    dateFormat() {
      return (date) => dateSimpleFormater(new Date(date));
    },
    ...mapState(['optional']),
  },
  methods: {
    handleTab(item){
      this.current = item.index
    },
    getServerData() {
      this.chartsDataCandle1 = JSON.parse(JSON.stringify(demodata.Candle));
    },
    handleDetail(n) {
      uni.navigateTo({ url: `/pages/new/new?newObj=${JSON.stringify(n)}` });
    },
    async fetchStockDetail() {
      const stock = await getStockList(this.code);
      this.stockInfo = stock[0];
    },
    async fetchNewsList() {
      const news = await getNewsList(5);
      this.news = news;
    },
    handleToggleOptional() {
      this.toggleOptional(this.code[0]);
    },
    ...mapMutations(['toggleOptional']),
  },
  onLoad(options) {
    const { code, name } = options;
    this.name = name;
    uni.setNavigationBarTitle({title: `${name} (${code})`});
    this.code = [code];
    this.fetchStockDetail();
    this.fetchNewsList();
  },
  onReady() {
    //模拟从服务器获取数据
    this.getServerData();
  },
};
</script>

<style lang="scss">
.content {
  padding-bottom: 100rpx;
}
.data-pane {
  display: flex;
  gap: 20rpx;
  .l-pane {
    flex: 1;
    color: #cb473a;
	.bigNum{
		height: 120rpx;
		line-height: 120rpx;
	}
  }
  .r-pane {
    flex: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    .r-item {
      line-height: 94rpx;
    }
  }
}
#kline-chart {
  width: 100%;
  height: 300px;
}
.charts-box {
  width: 100%;
  height: 270px;
}
  
.chart-container {
  margin: 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  padding-bottom: 20rpx;

  .flex-box{
    display: flex;
    gap: 20rpx;
  }
  .price-info {
    display: flex;
    justify-content: space-around;
    padding: 20rpx;
    font-size: 28rpx;
    color: #333;
  }

  .charts-box {
    img {
      width: 100%;
      height: 500rpx;
    }
  }
}

.trade-panel {
  width: 40%;
  margin: 0rpx;
  padding: 20rpx 0;
  background-color: #fff;
  border-radius: 20rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

  .panel-header {
    display: flex;
    justify-content: space-between;
    padding: 0 20rpx 10rpx;
    border-bottom: 2rpx solid #eee;
    font-size: 22rpx;
    color: #666;
    margin-bottom: 10rpx;

    text:first-child {
      width: 70rpx;
      text-align: center;
    }
    text:nth-child(2) {
      width: 120rpx;
      text-align: center;
    }
    text:last-child {
      width: 120rpx;
      text-align: right;
    }
  }

  .sell-panel,
  .buy-panel {
    .panel-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8rpx 20rpx;
        transition: background-color 0.3s;

        &:hover {
          background-color: rgba(0, 0, 0, 0.02);
        }

        .direction {
          width: 70rpx;
          text-align: center;
          font-size: 20rpx;
          color: #666;
        }
        .price {
          width: 120rpx;
          text-align: center;
          font-size: 24rpx;
          font-weight: 500;
        }
        .amount {
          width: 120rpx;
          text-align: right;
          font-size: 20rpx;
          color: #999;
        }
    }
  }

  .sell-panel {
    margin-bottom: 16rpx;
    border-bottom: 1rpx solid #f5f5f5;
    padding-bottom: 10rpx;
  }
}

.news-container {
  .n-title {
    width: fit-content;
    font-size: 40rpx;
    font-weight: bold;
    border-bottom: 4rpx solid rgba(#cb473a, 0.5);
  }
  .news {
    .new {
      margin: 20rpx 0;
      border-bottom: 2rpx solid #d5d5d5;
      padding: 10rpx 0;
      .n-info {
        font-size: 24rpx;
        color: #d5d5d5;
        display: flex;
        justify-content: space-between;
        margin-top: 10rpx;
      }
    }
  }
}

.ops {
  width: 100vw;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 30rpx 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #fff;
  z-index: 1000;
  .op {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .share-btn{
    background: transparent !important;
    color: #000;
    width: fit-content;
    border-radius: 0;
    line-height: 40rpx;
    font-size: 30rpx;
    border: none;
    padding: 0;
    margin: 0 80rpx;
    &::after {
      border: none;
    }
  }
  button {
    width: 100%;
    height: 80rpx;
    text-align: center;
    color: #fff;
    line-height: 80rpx;
    border-radius: 80rpx;
    background: linear-gradient(90deg, #f16017, #ebb390);
  }
}
.u-tabs{
	margin-left: -5rpx;
}
</style>
